@import './base.css';
@color:#5286ff;
.bar{
    .tero_nav{
        height: 60px;
        border-bottom: 2px solid #e9ebed;
        position: relative;
        z-index: 10;
        >.left,.right{
            height: 100% ;
            width: 85px ;
            line-height: 60px ;
        }
        >.left{
            float:left ;
            padding: 0;
            padding-left: 30px ;
            
            text-align: left ;
        }
        >.right{
            float:right;
            padding-right: 30px;
            text-align: right;
            position: relative;
            >.right_son{
                width: 371px;
	            height: 241px;
                border: 1px solid #ccd1db !important;
                position: absolute;
                right: 30px;
                top: calc(100% - 6px);
                border-radius: 2px;
                background-color: white;
                z-index: 100000000000000000000;
                text-align: center;
                padding-top: 8px;
                transform: scale(0);
                transition: transform 1s ease;
               
                .infoo{              
                    line-height: 100%;
                    color: #30383e;
                    background-color: #fff;
                    ul {
                      
                        li {
                            display: flex;
                            align-items: center;
                            border-bottom: 1px solid #e5e5e5;
                            height: 40px;
                            padding-left:32px; 
                            .infoo-left{
                                width: 95px;
                            }
                            .infoo-right{               
                               .infoo-right-top{
                                   display: flex;
                                   align-items: center;
                                   margin-bottom: 5px;
                                   h4{
                                    color: #30383e;
                                    font-size: 18px;
                               
                                   }
                                   img{
                                       height: 15px;
                                       margin-left: 8px;
                                   }
                               }
                               p{
                                color: #9ba2ab;
                               }
                            }
                            >p{
                                width: 95px;
                            }
            
                            &:first-child{
                              height: 83px;
                            }
                            &:last-child{
                                border: 0;
                                height: 91px;
                                align-items: flex-start;
                                padding-top: 13px;
                                >ul {
                                    >li {
                                        padding: 0 ;
                                        img{
                                            width: 51px;
                                            margin-right: 6px;
                                        }        

                                    }
                                }
                                strong{
                                    margin-top: 10px;
                                }
                            }

                        }
                    }
                }
            }
            >.active{
                transform: scale(1)
            }
        }
        >.nav{
            display: flex;
            overflow: hidden;
            justify-content: space-between;
            height: calc(100% + 4px);
            margin: 0;
            >li{
                height: 56px;
                line-height: 56px;
                text-align: center;
                font-size: 14px;
                color: #9ba2ab;
                cursor: pointer;
                position: relative;
                top: 4px;
                z-index: 100;
            }
            >.active_li{
                color: @color; 
                border-bottom: 4px solid @color;
            }
        }
    }
}